<template>
    <view class="flight-list">
        <view class="notice">
            <up-notice-bar bgColor="rgba(255, 255, 255, 0.11)" color="#FFF" :text="text" mode="link"></up-notice-bar>
        </view>
        <view class="header">
            <view class="route">
                <view class="city">
                    北京
                </view>
                <image class="ic_arrow" src="@/static/images/ic_arrow.png" mode=""></image>
                <view class="city">
                    昆明
                </view>
                <image class="ic_arrow-bot" src="@/static/images/icon2.png" mode=""></image>
            </view>
            <view class="select">
                <view class="calendar">
                    <view class="calendar-item" v-for="(item, idx) in calendarList" :key="item.date"
                        :class="{ active: idx === activeCalendarIdx }" @click="selectCalendar(idx)">
                        <view class="calendar-time">{{ item.dateStr }}</view>
                        <view class="calendar-week">{{ item.weekStr }}</view>
                    </view>
                </view>
                <view class="more" @click="showCalendar = true">
                    <image class="ic_arrow-bot" src="@/static/images/date.png" mode=""></image>
                    <view class="still">更多</view>
                </view>
                <!-- 日历弹窗 -->
                <up-calendar :show="showCalendar" @close="showCalendar = false" @confirm="onCalendarConfirm" />
            </view>
        </view>
        <view class="content">
            <view class="content-btn">
                <view v-for="(btn, idx) in btnList" :key="btn.text" class="btn-item"
                    :class="{ active: activeBtn === idx }" @click="setActiveBtn(idx)">
                    <image :src="activeBtn === idx ? btn.activeIcon : btn.icon" mode="" />
                    <view class="name">{{ btn.text }}</view>
                </view>
            </view>
            <view class="content-list">
                <view class="item" v-for="n in 10" :key="n" @click="onClick">
                    <view class="item-l">
                        <view class="top">
                            <image src="@/static/images/name.png" mode="" />
                            <view class="name">中国联合航空KN5869</view>
                        </view>
                        <view class="bot">
                            <view class="bot-l">
                                <view class="time">23:10</view>
                                <view class="airport">宣州机场</view>
                            </view>
                            <image src="@/static/images/ic_arrow-color.png" mode="" />
                            <view class="bot-l">
                                <view class="time">23:10</view>
                                <view class="airport">宣州机场</view>
                            </view>
                        </view>
                    </view>
                    <view class="item-r">
                        <view class="votes">剩余7张</view>
                        <view class="price">
                            <view>
                                ¥
                            </view>
                            <view>
                                322
                            </view>
                            <view>
                                起
                            </view>
                        </view>
                        <view class="member">
                            <image src="@/static/images/hy.png" mode="" />
                            <view>
                                会员
                            </view>
                            <view class="discount">
                                优惠 55
                            </view>
                        </view>


                    </view>
                </view>
            </view>
        </view>
        <view class="footer">
            <view class="footer-item">
                <image class="icon" src="@/static/images/time.png" mode=""></image>
                <view class="name">
                    时间从早到晚
                </view>
                <image class="arrow" src="@/static/images/icon.png" mode=""></image>
            </view>
            <view class="footer-item">
                <image class="icon" src="@/static/images/price.png" mode=""></image>
                <view class="name">
                    价格从高到底
                </view>
                <image class="arrow" src="@/static/images/icon1.png" mode=""></image>
            </view>
        </view>
    </view>
</template>


<script setup lang="ts">
import { ref } from 'vue'
const text = ref('尊敬的旅客：您好，请时刻注意自己的钱财，防止自己')
// 按钮数据
const btnList = [
    {
        text: '筛选',
        icon: new URL('@/static/images/icon3.png', import.meta.url).href,
        activeIcon: new URL('@/static/images/icon3-active.png', import.meta.url).href
    },
    {
        text: '仅看直飞',
        icon: new URL('@/static/images/icon4.png', import.meta.url).href,
        activeIcon: new URL('@/static/images/icon4-active.png', import.meta.url).href
    },
    {
        text: '隐藏共享',
        icon: new URL('@/static/images/icon5.png', import.meta.url).href,
        activeIcon: new URL('@/static/images/icon5-active.png', import.meta.url).href
    }
]
const activeBtn = ref(0)
const setActiveBtn = (idx: number) => {
    activeBtn.value = idx
}

const onClick = () => {
	uni.navigateTo({
		url: "/pages/order/order-filling",
	});
};

// 日期格式化
function formatDate(date: Date) {
    const m = date.getMonth() + 1
    const d = date.getDate()
    const weekArr = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
    const week = weekArr[date.getDay()]
    const now = new Date()
    // 判断是否为今天
    const isToday =
        date.getFullYear() === now.getFullYear() &&
        date.getMonth() === now.getMonth() &&
        date.getDate() === now.getDate()
    return {
        dateStr: `${m < 10 ? '0' + m : m}-${d < 10 ? '0' + d : d}`,
        weekStr: isToday ? '今天' : week
    }
}

// 生成日期数组
function genCalendarList(start: Date, len = 5) {
    const arr = []
    for (let i = 0; i < len; i++) {
        const d = new Date(start)
        d.setDate(d.getDate() + i)
        arr.push({
            date: d.toISOString().slice(0, 10),
            ...formatDate(d)
        })
    }
    return arr
}

const calendarList = ref(genCalendarList(new Date(), 5))
const activeCalendarIdx = ref(0)
const showCalendar = ref(false)

// 选中日历项
function selectCalendar(idx: number) {
    activeCalendarIdx.value = idx
}

// 日历弹窗选择
function onCalendarConfirm(e: any) {
    showCalendar.value = false
    let selDate = e && e[0] ? new Date(e[0]) : new Date()
    calendarList.value = genCalendarList(selDate, 5)
    activeCalendarIdx.value = 0
}
</script>

<style scoped lang="scss">
.flight-list {
    height: 100vh;
    width: 100vw;
    position: relative;

    .notice {
        position: relative;
        z-index: 99;

    }

    .header {
        background: url("@/static/images/bg.png");
        background-size: 100% 100%;
        height: 500rpx;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        box-sizing: border-box;
        padding: 80rpx 10rpx 10rpx 10rpx;

        .route {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 20rpx 0;

            .ic_arrow {
                width: 52rpx;
                height: 14rpx;
                margin: 0 20rpx;
            }

            .ic_arrow-bot {
                width: 22rpx;
                height: 16rpx;
                margin-left: 20rpx;
            }

            .city {
                font-weight: bold;
                font-size: 32rpx;
                color: #FFFFFF;
            }
        }

        .select {
            display: flex;
            align-items: center;
            box-sizing: border-box;

            .calendar {
                display: flex;
                align-items: center;
                width: 90%;

                .calendar-item {
                    width: calc(100% / 5);
                    text-align: center;
                    padding: 10rpx;
                    margin-right: 10rpx;
                    box-sizing: border-box;
                    border-radius: 10rpx 10rpx 10rpx 10rpx;
                    background: rgba(255, 255, 255, 0.1);

                    .calendar-time {
                        font-size: 26rpx;
                        color: #FFFFFF;
                        margin-bottom: 10rpx;
                    }

                    .calendar-week {
                        font-weight: 500;
                        font-size: 26rpx;
                        color: #FFFFFF;
                    }
                }

                .active {
                    background: #1C71F4;
                }
            }

            .more {
                text-align: center;
                color: #fff;
                font-size: 26rpx;
                margin: 0 10rpx;

                .ic_arrow-bot {
                    width: 40rpx;
                    height: 40rpx;
                    margin-bottom: 10rpx;

                }


            }
        }
    }

    .content {
        background: #F4F5F8;
        border-radius: 32rpx 32rpx 0 0;
        padding: 30rpx;
        box-sizing: border-box;
        width: 100%;
        min-height: 100%;
        position: absolute;
        top: 280rpx;
        padding-bottom: 152rpx;

        .content-btn {
            display: flex;
            justify-content: space-around;
            align-items: center;

            .btn-item {
                display: flex;
                align-items: center;

                image {
                    width: 40rpx;
                    height: 40rpx;
                    margin-right: 10rpx;
                }

                .name {
                    font-weight: 500;
                    font-size: 26rpx;
                    color: #101D34;
                }
            }

            .btn-item.active {
                .name {
                    color: #1C71F4;
                }
            }

        }

        .content-list {
            margin-top: 20rpx;

            .item {
                display: flex;
                justify-content: space-between;
                background: #FFFFFF;
                border-radius: 20rpx 20rpx 20rpx 20rpx;
                padding: 20rpx 50rpx;
                box-sizing: border-box;
                margin-bottom: 20rpx;

                .item-l {
                    .top {
                        display: flex;
                        align-items: center;
                        font-size: 28rpx;
                        color: rgba(140, 148, 161, 1);
                        margin-bottom: 30rpx;

                        image {
                            width: 40rpx;
                            height: 40rpx;
                            margin-right: 10rpx;
                        }

                    }

                    .bot {
                        display: flex;
                        align-items: center;

                        image {
                            width: 52rpx;
                            height: 14rpx;
                            margin: 0 20rpx;
                        }

                        .bot-l {
                            .time {
                                font-weight: bold;
                                font-size: 40rpx;
                                color: #101D34;
                            }

                            .airport {
                                font-weight: 500;
                                font-size: 26rpx;
                                color: #101D34;
                            }
                        }
                    }
                }

                .item-r {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-end;
                    justify-content: space-between;

                    .votes {
                        font-size: 24rpx;
                        color: #1C71F4;
                    }

                    .price {
                        display: flex;
                        justify-content: end;
                        align-items: end;

                        &>:nth-child(1) {
                            font-size: 26rpx;
                            color: #1C71F4;
                            font-weight: bold;
                        }

                        &>:nth-child(2) {
                            font-size: 38rpx;
                            color: #1C71F4;
                            font-weight: bold;
                            margin: 0 10rpx;
                            position: relative;
                            bottom: -6rpx;
                        }

                        &>:nth-child(3) {
                            font-size: 26rpx;
                            color: #49596D;
                        }
                    }

                    .member {
                        display: flex;
                        align-items: center;
                        justify-content: end;

                        image {
                            width: 34rpx;
                            height: 28rpx;
                        }

                        &>:nth-child(2) {
                            font-size: 22rpx;
                            color: #152651;
                            margin: 0 10rpx;
                        }

                        .discount {
                            font-size: 22rpx;
                            color: #ECA248;
                            padding: 10rpx;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            background: rgba(253, 233, 186, 0.3);
                            border-radius: 5rpx 5rpx 5rpx 5rpx;
                        }
                    }
                }
            }
        }



    }

    .footer {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;
        background: #fff;
        padding: 50rpx 20rpx;
        box-sizing: border-box;
        box-shadow: 14rpx 0rpx 34rpx 0rpx #ccc;

        .footer-item {
            display: flex;
            align-items: center;

            .icon {
                width: 44rpx;
                height: 44rpx;
                margin-right: 10rpx;
            }

            .arrow {
                width: 26rpx;
                height: 20rpx;
                margin-left: 10rpx;
            }
        }
    }

}
</style>